<!DOCTYPE html>
<html lang="en">
  <head>
    
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="viewport" content="width=1024px, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    
    <title>Spina</title>
    
    <!-- Stylesheets -->
    <link rel="stylesheet" href="../../css/reset.css" />
    <link rel="stylesheet" href="../../css/icons.css" />
    <link rel="stylesheet" href="../../css/formalize.css" />
    <link rel="stylesheet" href="../../css/checkboxes.css" />
    <link rel="stylesheet" href="../../css/sourcerer.css" />
    <link rel="stylesheet" href="../../css/jqueryui.css" />
    <link rel="stylesheet" href="../../css/tipsy.css" />
    <link rel="stylesheet" href="../../css/calendar.css" />
    <link rel="stylesheet" href="../../css/tags.css" />
    <link rel="stylesheet" href="../../css/fonts.css" />
    <link rel="stylesheet" href="../../css/main.css" />
    <link rel="stylesheet" media="all and (orientation:portrait)" href="../../css/portrait.css" />
    <link rel="apple-touch-icon" href="./apple-touch-icon-precomposed.png" />
    <link rel="shortcut icon" href="../../favicon.ico" type="image/x-icon" />
    
    <!--[if lt IE 9]>
    <script src="/js/html5shiv.js"></script>
    <![endif]-->
  <meta charset="UTF-8"></head>
  
  <body>

    <!-- Primary navigation -->
    <nav id="primary">
      <ul>
        <li >
          <a href="../../dashboard/index.html">
            <span class="glyph dashboard"></span>
            Dashboard
          </a>
        </li>
        <li class="active">
          <a href="../miscellaneous/index.html">
            <span class="glyph shuffle"></span>
            UI Elements
          </a>
        </li>
        <li >
          <a href="../../forms/forms/index.html">
            <span class="glyph pencil"></span>
            Forms
          </a>
        </li>
        <li >
          <a href="../../tables/tables/index.html">
            <span class="glyph listicon"></span>
            Tables
          </a>
        </li>
        <li >
          <a href="../../charts/linechart/index.html">
            <span class="glyph chart"></span>
            Charts
          </a>
        </li>
        <li class="bottom">
          <a href="../../login/index.html">
            <span class="glyph quit"></span>
            Log out
          </a>
        </li>
      </ul>
    </nav>
    
    <!-- Secondary navigation -->
    <nav id="secondary">
      <ul>
  <li ><a href="../miscellaneous/index.html">Miscellaneous</a></li>
  <li ><a href="../modal/index.html">Modal windows</a></li>
  <li class="active"><a href="./index.html">Buttons &amp; Icons</a></li>
  <li ><a href="../calendar/index.html">Calendar</a></li>
  <li ><a href="../typography/index.html">Typography</a></li>
  <li ><a href="../notifications/index.html">Notifications</a></li>
</ul>
      
      <div id="notifications">
        <ul>
        </ul>
      </div>
    </nav>
    
    <section id="maincontainer">
      <div id="main">
      
      <div class="box column-left">
  <div class="box-header">
    <h1>Default buttons</h1>
    <ul>
      <li class='active'><a href="#buttons">Buttons</a></li>
      <li><a href="#buttonscode">Code</a></li>
    </ul>
  </div>
  
  <div class="box-content">
    <div class="tab-content" id="buttons">
      <a href="#" class="button">Default button</a>
      <a href="#" class="button blue">Blue button</a>
    </div>
  
    <div class="tab-content" id="buttonscode">
      <code class="html"><a href="#" class="button">Default button</a>
<a href="#" class="button blue">Blue button</a></code>
    </div>
  </div>
</div>

<div class="box column-right">
  <div class="box-header">
    <h1>Small buttons</h1>
    <ul>
      <li class='active'><a href="#smallbuttons">Buttons</a></li>
      <li><a href="#smallbuttonscode">Code</a></li>
    </ul>
  </div>
  
  <div class="box-content">
    <div class="tab-content" id="smallbuttons">
      <a href="#" class="button small">Small button</a>
      <a href="#" class="button small blue">Small blue button</a>
    </div>
  
    <div class="tab-content" id="smallbuttonscode">
      <code class="html"><a href="#" class="button small">Small button</a>
<a href="#" class="button small blue">Blue button</a></code>
    </div>
  </div>
</div>

<div class="clear"></div>

<div class="box">
  <div class="box-header">
    <h1>Action bar</h1>
    <ul>
      <li class='active'><a href="#actionbar">Buttons</a></li>
      <li><a href="#actionbarcode">Code</a></li>
    </ul>
  </div>
  
  <div class="box-content">
    <div class="tab-content" id="actionbar">
      <p>This is an action bar. Which aligns the buttons nicely at the bottom of the container.
      
      <div class="action_bar">
        <a href="#" class="button blue">Submit post!</a>
        <a href="#" class="button">Cancel</a>
        <a href="#" class="button"><span class="glyph cog"></span> Settings</a>
        <a href="#" class="button blue"><span class="glyph export"></span> Export data</a>
        <a href="#">Simple link</a>
      </div>
    </div>
  
    <div class="tab-content" id="actionbarcode">
      <code class="html"><div class="action_bar">
  <a href="#" class="button blue">Submit post!</a>
  <a href="#" class="button">Cancel</a>
  <a href="#" class="button small">Small cancel</a>
  <a href="#" class="button small blue">Small blue cancel</a>
  <a href="#" class="button"><span class="glyph cog"></span> Settings</a>
  <a href="#" class="button blue"><span class="glyph export"></span> Export data</a>
  <a href="#" class="button blue"><span class="glyph export"></span> Simple link</a>
</div></code>
    </div>
  </div>
</div>

<div class="box">
  <div class="box-header">
    <h1>Pictos font* icons</h1>
  </div>
  
  <div class="box-content">
    <a href="#" class="button"><span class="glyph dock"></span> dock</a>
    <a href="#" class="button"><span class="glyph dropbox"></span> dropbox</a>
    <a href="#" class="button"><span class="glyph cloudup"></span> cloudup</a>
    <a href="#" class="button"><span class="glyph blocked"></span> blocked</a>
    <a href="#" class="button"><span class="glyph lightning"></span> lightning</a>
    <a href="#" class="button"><span class="glyph broadcast"></span> broadcast</a>
    <a href="#" class="button"><span class="glyph group"></span> group</a>
    <a href="#" class="button"><span class="glyph help"></span> help</a>
    <a href="#" class="button"><span class="glyph info"></span> info</a>
    <a href="#" class="button"><span class="glyph link"></span> link</a>
    <a href="#" class="button"><span class="glyph love"></span> love</a>
    <a href="#" class="button"><span class="glyph listicon"></span> listicon</a>
    <a href="#" class="button"><span class="glyph music"></span> music</a>
    <a href="#" class="button"><span class="glyph note"></span> note</a>
    <a href="#" class="button"><span class="glyph folder"></span> folder</a>
    <a href="#" class="button"><span class="glyph pencil"></span> pencil</a>
    <a href="#" class="button"><span class="glyph chat"></span> chat</a>
    <a href="#" class="button"><span class="glyph restart"></span> restart</a>
    <a href="#" class="button"><span class="glyph search"></span> search</a>
    <a href="#" class="button"><span class="glyph time"></span> time</a>
    <a href="#" class="button"><span class="glyph switch"></span> switch</a>
    <a href="#" class="button"><span class="glyph camera"></span> camera</a>
    <a href="#" class="button"><span class="glyph balloon"></span> balloon</a>
    <a href="#" class="button"><span class="glyph tools"></span> tools</a>
    <a href="#" class="button"><span class="glyph cog"></span> cog</a>
    <a href="#" class="button"><span class="glyph tags"></span> tags</a>
    <a href="#" class="button"><span class="glyph link2"></span> link2</a>
    <a href="#" class="button"><span class="glyph twitter"></span> twitter</a>
    <a href="#" class="button"><span class="glyph cloud"></span> cloud</a>
    <a href="#" class="button"><span class="glyph delete"></span> delete</a>
    <a href="#" class="button"><span class="glyph eye"></span> eye</a>
    <a href="#" class="button"><span class="glyph file"></span> file</a>
    <a href="#" class="button"><span class="glyph global"></span> global</a>
    <a href="#" class="button"><span class="glyph home"></span> home</a>
    <a href="#" class="button"><span class="glyph inbox"></span> inbox</a>
    <a href="#" class="button"><span class="glyph join"></span> join</a>
    <a href="#" class="button"><span class="glyph key"></span> key</a>
    <a href="#" class="button"><span class="glyph lens"></span> lens</a>
    <a href="#" class="button"><span class="glyph message"></span> message</a>
    <a href="#" class="button"><span class="glyph new"></span> new</a>
    <a href="#" class="button"><span class="glyph suitcase"></span> suitcase</a>
    <a href="#" class="button"><span class="glyph images"></span> images</a>
    <a href="#" class="button"><span class="glyph quit"></span> quit</a>
    <a href="#" class="button"><span class="glyph export"></span> export</a>
    <a href="#" class="button"><span class="glyph star"></span> star</a>
    <a href="#" class="button"><span class="glyph plane"></span> plane</a>
    <a href="#" class="button"><span class="glyph user"></span> user</a>
    <a href="#" class="button"><span class="glyph video"></span> video</a>
    <a href="#" class="button"><span class="glyph new"></span> new</a>
    <a href="#" class="button"><span class="glyph truck"></span> truck</a>
    <a href="#" class="button"><span class="glyph chart"></span> chart</a>
    <a href="#" class="button"><span class="glyph pie"></span> pie</a>
    <a href="#" class="button"><span class="glyph fullscreen"></span> fullscreen</a>
    <a href="#" class="button"><span class="glyph refresh"></span> refresh</a>
    <a href="#" class="button"><span class="glyph tick"></span> tick</a>
    <a href="#" class="button"><span class="glyph tick2"></span> tick2</a>
    <a href="#" class="button"><span class="glyph play"></span> play</a>
    <a href="#" class="button"><span class="glyph pause"></span> pause</a>
    <a href="#" class="button"><span class="glyph stop"></span> stop</a>
    <a href="#" class="button"><span class="glyph forward"></span> forward</a>
    <a href="#" class="button"><span class="glyph rewind"></span> rewind</a>
    <a href="#" class="button"><span class="glyph minus"></span> minus</a>
    <a href="#" class="button"><span class="glyph battery"></span> battery</a>
    <a href="#" class="button"><span class="glyph left"></span> left</a>
    <a href="#" class="button"><span class="glyph right"></span> right</a>
    <a href="#" class="button"><span class="glyph calendar"></span> calendar</a>
    <a href="#" class="button"><span class="glyph shuffle"></span> shuffle</a>
    <a href="#" class="button"><span class="glyph wifi"></span> wifi</a>
    <a href="#" class="button"><span class="glyph dashboard"></span> dashboard</a>
    <a href="#" class="button"><span class="glyph dots"></span> dots</a>
    <a href="#" class="button"><span class="glyph print"></span> print</a>
    <a href="#" class="button"><span class="glyph download"></span> download</a>
    <a href="#" class="button"><span class="glyph alert"></span> alert</a>
    <a href="#" class="button"><span class="glyph pinpoint"></span> pinpoint</a>
    <a href="#" class="button"><span class="glyph trash"></span> trash</a>
    <a href="#" class="button"><span class="glyph cart"></span> cart</a>
    <a href="#" class="button"><span class="glyph cash"></span> cash</a>
    <a href="#" class="button"><span class="glyph flag"></span> flag</a>
    <a href="#" class="button"><span class="glyph plus"></span> plus</a>
    <a href="#" class="button"><span class="glyph cross"></span> cross</a>
    <a href="#" class="button"><span class="glyph lock"></span> lock</a>
    <a href="#" class="button"><span class="glyph openlock"></span> openlock</a>
    <a href="#" class="button"><span class="glyph minus2"></span> minus2</a>
    <a href="#" class="button"><span class="glyph plus2"></span> plus2</a>
    <a href="#" class="button"><span class="glyph up"></span> up</a>
    <a href="#" class="button"><span class="glyph down"></span> down</a>
    <a href="#" class="button"><span class="glyph windows"></span> windows</a>
    <a href="#" class="button"><span class="glyph alarm"></span> alarm</a>
    <a href="#" class="button"><span class="glyph quote"></span> quote</a>
    <a href="#" class="button"><span class="glyph mute"></span> mute</a>
    <a href="#" class="button"><span class="glyph sound"></span> sound</a>
    <a href="#" class="button"><span class="glyph question"></span> question</a>
    
    <br /><br />
    <p class="warning">
      *Font not included in my theme due to copyright. I highly recommend going over to <a href="http://pictos.drewwilson.com">pictos.drewwilson.com</a>, you will not regret it.
    </p>
  </div>
</div>

<div class="box">
  <div class="box-header">
    <h1>jQuery UI Icons</h1>
  </div>
  
  <div class="box-content">
    <a href="#" class="button"><span class="ui-icon ui-icon-carat-1-n"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-carat-1-ne"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-carat-1-e"></span> Button</a>

<a href="#" class="button"><span class="ui-icon ui-icon-carat-1-se"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-carat-1-s"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-carat-1-sw"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-carat-1-w"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-carat-1-nw"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-carat-2-n-s"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-carat-2-e-w"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-triangle-1-n"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-triangle-1-ne"></span> Button</a>

<a href="#" class="button"><span class="ui-icon ui-icon-triangle-1-e"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-triangle-1-se"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-triangle-1-s"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-triangle-1-sw"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-triangle-1-w"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-triangle-1-nw"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-triangle-2-n-s"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-triangle-2-e-w"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrow-1-n"></span> Button</a>

<a href="#" class="button"><span class="ui-icon ui-icon-arrow-1-ne"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrow-1-e"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrow-1-se"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrow-1-s"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrow-1-sw"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrow-1-w"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrow-1-nw"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrow-2-n-s"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrow-2-ne-sw"></span> Button</a>

<a href="#" class="button"><span class="ui-icon ui-icon-arrow-2-e-w"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrow-2-se-nw"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrowstop-1-n"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrowstop-1-e"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrowstop-1-s"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrowstop-1-w"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrowthick-1-n"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrowthick-1-ne"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrowthick-1-e"></span> Button</a>

<a href="#" class="button"><span class="ui-icon ui-icon-arrowthick-1-se"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrowthick-1-s"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrowthick-1-sw"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrowthick-1-w"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrowthick-1-nw"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrowthick-2-ne-sw"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrowthick-2-e-w"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrowthick-2-se-nw"></span> Button</a>

<a href="#" class="button"><span class="ui-icon ui-icon-arrowthickstop-1-n"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrowthickstop-1-e"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrowthickstop-1-s"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrowthickstop-1-w"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrowreturnthick-1-w"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrowreturnthick-1-n"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrowreturnthick-1-e"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrowreturnthick-1-s"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrowreturn-1-w"></span> Button</a>

<a href="#" class="button"><span class="ui-icon ui-icon-arrowreturn-1-n"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrowreturn-1-e"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrowreturn-1-s"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrowrefresh-1-w"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrowrefresh-1-n"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrowrefresh-1-e"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrowrefresh-1-s"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrow-4"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-arrow-4-diag"></span> Button</a>

<a href="#" class="button"><span class="ui-icon ui-icon-extlink"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-newwin"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-refresh"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-shuffle"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-transfer-e-w"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-transferthick-e-w"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-folder-collapsed"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-folder-open"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-document"></span> Button</a>

<a href="#" class="button"><span class="ui-icon ui-icon-document-b"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-note"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-mail-closed"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-mail-open"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-suitcase"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-comment"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-person"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-print"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-trash"></span> Button</a>

<a href="#" class="button"><span class="ui-icon ui-icon-locked"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-unlocked"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-bookmark"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-tag"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-home"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-flag"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-calculator"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-cart"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-pencil"></span> Button</a>

<a href="#" class="button"><span class="ui-icon ui-icon-clock"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-disk"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-calendar"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-zoomin"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-zoomout"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-search"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-wrench"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-gear"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-heart"></span> Button</a>

<a href="#" class="button"><span class="ui-icon ui-icon-star"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-link"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-cancel"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-plus"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-plusthick"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-minus"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-minusthick"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-close"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-closethick"></span> Button</a>

<a href="#" class="button"><span class="ui-icon ui-icon-key"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-lightbulb"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-scissors"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-clipboard"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-copy"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-contact"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-image"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-video"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-script"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-alert"></span> Button</a>

<a href="#" class="button"><span class="ui-icon ui-icon-info"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-notice"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-help"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-check"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-bullet"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-radio-off"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-radio-on"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-pin-w"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-pin-s"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-play"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-pause"></span> Button</a>

<a href="#" class="button"><span class="ui-icon ui-icon-seek-next"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-seek-prev"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-seek-end"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-seek-first"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-stop"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-eject"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-volume-off"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-volume-on"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-power"></span> Button</a>

<a href="#" class="button"><span class="ui-icon ui-icon-signal-diag"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-signal"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-battery-0"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-battery-1"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-battery-2"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-battery-3"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-circle-plus"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-circle-minus"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-circle-close"></span> Button</a>

<a href="#" class="button"><span class="ui-icon ui-icon-circle-triangle-e"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-circle-triangle-s"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-circle-triangle-w"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-circle-triangle-n"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-circle-arrow-e"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-circle-arrow-s"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-circle-arrow-w"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-circle-arrow-n"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-circle-zoomin"></span> Button</a>

<a href="#" class="button"><span class="ui-icon ui-icon-circle-zoomout"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-circle-check"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-circlesmall-plus"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-circlesmall-minus"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-circlesmall-close"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-squaresmall-plus"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-squaresmall-minus"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-squaresmall-close"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-grip-dotted-vertical"></span> Button</a>

<a href="#" class="button"><span class="ui-icon ui-icon-grip-dotted-horizontal"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-grip-solid-vertical"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-grip-solid-horizontal"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-gripsmall-diagonal-se"></span> Button</a>
<a href="#" class="button"><span class="ui-icon ui-icon-grip-diagonal-se"></span> Button</a>
  </div>
</div>
      
      </div>
    </section>
  
    <!-- JavaScript -->
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jqueryui.min.js"></script>
    <script src="../../js/jquery.cookies.js"></script>
    <script src="../../js/jquery.pjax.js"></script>
    <script src="../../js/formalize.min.js"></script>
    <script src="../../js/jquery.metadata.js"></script>
    <script src="../../js/jquery.validate.js"></script>
    <script src="../../js/jquery.checkboxes.js"></script>
    <script src="../../js/jquery.selectskin.js"></script>
    <script src="../../js/jquery.fileinput.js"></script>
    <script src="../../js/jquery.datatables.js"></script>
    <script src="../../js/jquery.sourcerer.js"></script>
    <script src="../../js/jquery.tipsy.js"></script>
    <script src="../../js/jquery.calendar.js"></script>
    <script src="../../js/jquery.inputtags.min.js"></script>
    <script src="../../js/jquery.wymeditor.js"></script>
    <script src="../../js/jquery.livequery.js"></script>
    <script src="../../js/jquery.highcharts.js"></script>
    
    <!-- Just examples, can be removed in production -->
      <script src="../../js/chart_examples.js"></script>
      
    <script src="../../js/application.js"></script>
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-11172759-15']);
      _gaq.push(['_trackPageview']);
    
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
  </body>
</html>